<template>
  <div>
    <div class="search" @click="goSearchDetail">
      <van-search
        v-model="kw"
        placeholder="请输入作品名，创作人"
        size="20"
      />
    </div>
    <div class="banner">
      <van-swipe
        :autoplay="3000"
        indicator-color="#fff"
        width="20px"
        height="20px"
      >
        <van-swipe-item v-for="(item, index) in banner" :key="index" @click=toVideo(item.id)>
          <img v-lazy="item.cover" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="recommend-list">
      <ul class="list">
        <li>
          <div>
            <a href="javascript:;">
              <img
                src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/01/145c3c382f1a82d.png"
                alt=""
              />
              <span>创作人</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="javascript:;">
              <img
                src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/01/145c3c3871bd708.png"
                alt=""
              />
              <span>机构</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="javascript:;">
              <img
                src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/02/015c53c03cb6605.png"
                alt=""
              />
              <span>正版素材</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="javascript:;">
              <img
                src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/08/055d47e2511d1d8.png"
                alt=""
              />
              <span>活动</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
    <div class="title-nav">
      <h2>作品</h2>
      <a href="javascript:;"><span>全部作品</span></a>
    </div>
    <div class="nav-list">
      <ul class="nav-list-bar">
        <li v-for="(item,i) in type"  @click="toDetail(item.category_name)" :key="i">
          <a href="javascript:;">
            <div>
              <img
                v-lazy=item.cover
                alt=""
              />
              <span>{{item.category_name}}</span>
            </div>
          </a>
        </li>
    
      </ul>
    </div>

  </div>
</template>
<script>

  import axios from "axios";
import VueAxios from "vue-axios";
export default {

  data() {
    return {
      kw: "",
      type:[],
      banner: [
      ],
    };
  },
  methods: {
    getData(){
      axios({
        url:"https://apis.netstart.cn/xpc/page/discovery",
         method: "get",
      })
      .then(res => {
        this.type = res.data.data.categories;
        this.banner = res.data.data.banners;
        this.banner.forEach(item=>{
            const reg =/(?<=\/)\d+(?=\?)/;
            let arr = item.url.match(reg)[0];
            item.id=arr;
          })
          console.log(this.type);
      })
    },
    goSearchDetail(){
      this.$router.push({
        path: "/SearchDetail",
      });
    },
    toVideo(id) {
      this.$router.push({ path: "/Video", query: { id } });
    },
    toDetail(kw){
        this.$router.push({ path: "/searchresult", query: { kw: kw } });
      },
    },
  mounted() {
    this.getData();
  },
  //   邮箱正则
};
</script>
<style lang="scss">
.search {
  box-sizing: border-box;
  .van-search {
    box-sizing: border-box;
    height: 14.4928vw;
  }
  .van-cell {
    padding: 10px;
    box-sizing: border-box;
  }
  .van-field__control {
    height: 6.2802vw;
    [placeholder] {
      font-size: 7.2vw;
    }
  }
  .van-field__body {
    [placeholder] {
      font-size: 27px;
      color: #9c9799;
    }
  }
  .van-icon-search {
    width: 4.3478vw;
    height: 6.2802vw;
    font-size: 4.3478vw;
    top: 1.3889vw;
  }
}
.banner {
  width: 94.686vw;
  height: 51vw;
  border-radius: 20px;
  margin-left: 10px;
  overflow: hidden;
  margin-top: 2.4155vw;
  img {
    width: 94.686vw;
    height: 51vw;
    // border-radius: 20px;
  }
  .van-swipe__indicator {
    width: 14px;
    height: 14px;
  }
}
.recommend-list {
  width: 94.686vw;
  margin-left: 10px;
  margin-top: 4.1063vw;
  .list {
    display: flex;
    justify-content: space-between;
    li {
      position: relative;
      div {
        width: 18.1159vw;
        height: 21.256vw;
        box-sizing: border-box;
        padding: 20px;
        justify-content: center;
        align-items: center;
        a {
          display: flex;
          flex-direction: column;
          img {
            width: 7.971vw;
            height: 7.971vw;
            padding: 0 2.5401vw;
          }
          span {
            margin-top: 2.657vw;
            text-align: center;
          }
        }
      }
    }
  }
}
.title-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.4155vw;
  width: 94.4444vw;
  h2 {
    margin-left: 2.4155vw;
  }
  span {
    color: #e4393c;
  }
}
.nav-list {
  width: 94.4444vw;
  margin-left: 2.4155vw;
  margin-top: 3.8309vw;
  
  .nav-list-bar {
    padding-bottom: 70px;
  margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      margin-bottom: 2.4155vw;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
    }
    img {
      width: 45.1691vw;
      height: 31.8841vw;
    }
    span {
      position: absolute;
      top: 2.4155vw;
      left: 2.4155vw;
      font-size: 3.9444vw;
    }
  }
}
</style>